<!--
//
// workbenches.vue
// hs-admin
//
// Created by 区区电脑 on 2023/12/09.
//
-->
<template>
    <div class="workbenches">
        <g-flex column justify-content-between align-items-center class="container">
            <g-flex align-content-start justify-content-start column width="100%" wrap>
                <g-flex align-content-start justify-content-start row wrap>
                    <count v-for="(item, i) in state.countList" :key="i" :item="item" class="count-card" />
                </g-flex>
                <Card title="设备分布图" style="width: calc(100% - 20px)">
                    <div class="map-container">
                        <very-map @ready="computerMap" style="width: 100%;height: 100%"/>
                    </div>
                </Card>
                <div class="chart-list">
                    <Card title="程序版本数量">
                        <template #right><el-button link type="primary" @click="toDownload">程序下载</el-button></template>
                        <g-charts :option="state.versionChartConfig" hide-empty class="chart" />
                    </Card>
                    <Card title="我的任务">
                        <template #right><el-button link type="primary" @click="toTask">任务处理</el-button></template>
                        <div class="task-list">
                            <div v-for="item in state.taskList" :key="item.id" class="task">
                                <g-flex align-items-start justify-content-start row>
                                    <div class="code">#{{ item.code }}. </div>
                                    <g-flex class="name" row justify-content-start align-items-start wrap>
                                        <p>
                                            {{ item.name }}
                                            <el-tag v-if="item.state === 1" round type="danger">未解决</el-tag>
                                            <el-tag v-if="item.state === 2" round type="warning">待审核</el-tag>
                                            <el-tag v-if="item.state === 3" round type="danger">已拒绝</el-tag>
                                        </p>
                                    </g-flex>
                                </g-flex>
                            </div>
                            <el-empty v-if="!state.taskList||state.taskList.length===0" description="暂无任务"/>
                        </div>
                    </Card>
                </div>

            </g-flex>

            <company-footer class="footer"/>
        </g-flex>

    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import Count from "./WorkbenchesComponents/Count.vue"
import * as api from "./WorkbenchesComponents/api.js"
import Card from "./WorkbenchesComponents/Card.vue"
import GFlex from "@/components/GFlex/GFlex.vue";
import VeryMap from "@/plugins/VeryMap/VeryMap.vue";
import {computerMap} from "./WorkbenchesComponents/computerMap.js"


const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const myInfo = computed(() => store.getters.userInfo);
const layoutType = computed(() => store.getters.layoutType);
const state = reactive({
    countList: [],
    versionChartConfig: {}
})
const app = {}
/**
 * 地图初始化
 * @param map
 */
const onMapReady = (map) => {
    app.map = map;
}

/**
 * 下载页面
 */
function toDownload() {
    router.push("/?page=/Download/Index&titleName=程序下载");
}

/**
 * 任务管理
 */
function toTask() {
    router.push("/?page=/DebugTask/Task/Index&titleName=任务列表");
}

/**
 * 查询统计数据
 */
async function loadCountData() {
    const {success, data} = await api.GetDeviceAndComputerStatistics();
    if (!success) return
    state.countList.push({
        title: "设备数量",
        value: data.deviceCount,
        color: "rgb(102.2, 177.4, 255)",
        bIcon: false,
        icon: "Cpu",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    state.countList.push({
        title: "可用主机数量",
        value: data.computerPassCount,
        color: "rgb(133.4, 206.2, 97.4)",
        bIcon: false,
        icon: "Monitor",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    state.countList.push({
        title: "待审核主机数量",
        value: data.computerAuditCount,
        color: "rgb(235, 180.6, 99)",
        bIcon: false,
        icon: "CollectionTag",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    state.countList.push({
        title: "已锁定主机数量",
        value: data.computerRejectCount,
        color: "rgb(247, 137.4, 137.4)",
        bIcon: false,
        icon: "Lock",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    return true
}

/**
 * 查询我的待处理任务
 */
async function loadBugTaskList() {
    const res = await api.GetDebugList({currentHandlerId: myInfo.value.id,stateList: [1, 2, 3]});
    state.taskList = res.data || [];
}

/**
 * 查询程序版本数量
 * @returns {Promise<void>}
 */
async function loadVersionConfig() {
    const {success, data} = await api.GetProgAndVersionStatistics();
    if (!success) return
    state.versionChartConfig = {
        grid: {
            top: 80
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { }
        },
        legend: {
            top: 40,
            data: ['32位', '64位']
        },
        xAxis: [
            {
                type: 'category',
                data: data.map(item => item.progName + `(V${item.newVersionNum || 0})`),
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                interval: 50,
            },
        ],
        series: [
            {
                name: '32位',
                type: 'bar',
                barMaxWidth: 40,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 个';
                    }
                },
                data: data.map(item => item.x86Count)
            },
            {
                name: '64位',
                type: 'bar',
                barMaxWidth: 40,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 个';
                    }
                },
                data: data.map(item => item.x64Count)
            }
        ]
    }
}

/**
 * 查询任务统计数据
 * @returns {Promise<void>}
 */
async function loadDubTaskData() {
    const {data} = await api.GetDebugInfoByCurrentUser()
    state.countList.push({
        title: "待处理任务数量",
        value: data.unsolved,
        color: "rgb(151, 6, 172)",
        bIcon: false,
        icon: "Pointer",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    state.countList.push({
        title: "待审核任务数量",
        value: data.toAudit,
        color: "rgb(235, 180.6, 99)",
        bIcon: false,
        icon: "Warning",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    state.countList.push({
        title: "被拒绝任务数量",
        value: data.denied,
        color: "rgb(247, 137.4, 137.4)",
        bIcon: false,
        icon: "CircleClose",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    return true
}

/**
 * 查询ip 发生变化的主机数量
 * @returns {Promise<void>}
 */
async function loadIpChangeCount() {
    const {data} = await api.GetIpChangeComputerCount();
    state.countList.push({
        title: "IP发生变更的主机数量",
        value: data || 0,
        color: "rgb(235, 180.6, 99)",
        bIcon: false,
        icon: "Place",
        iconSize: 50,
        dateTime: new Date().getTime(),
    })
    return true
}

onMounted(async () => {
    loadBugTaskList()
    loadVersionConfig()
    await loadCountData()
    await loadIpChangeCount()
    await loadDubTaskData()
})
</script>

<style lang="scss" scoped>
.workbenches {
    padding: 20px 0 10px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    //.container {
    //    min-height: 900px;
    //}
    .chart-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        .chart {
            width: 100%;
            height: 270px;
        }
    }

    .task-list {
        width: 100%;
        overflow: auto;
        padding: 0 10px;
        height: 270px;
        box-sizing: border-box;
        .task {
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            font-size: 16px;
            box-sizing: border-box;
            width: 100%;

            &:hover {
                color: var(--el-color-primary);
            }
            &:active {
                opacity: 0.7;
            }
            .code {
                min-width: 40px;
            }
            .name {
                flex: 1;
                p {
                    margin: 0;
                }
            }
        }
    }
    .map-container {
        width: 100%;
        height: 300px;
    }
}
//.footer {
//    margin-top: 20px;
//}
@media (width < 1300px) {
    .workbenches {

        .chart-list {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .chart {
                width: 100%;
                height: 400px;
            }
            .task-list {
                height: 400px;
            }
        }
    }
}
@media (width <= 800px) {
    .workbenches {
        padding: 10px 0 0 10px;
        .chart-list {
            .chart {
                width: 100%;
                height: 300px;
            }
            .task-list {
                height: 340px;
            }
        }

    }
}

</style>
<style lang="scss">
.map-computer-marker {
    //box-shadow: 0 0 10px 0 #90f396;
    //border: 1px solid #90f396;
    //border-radius: 100%;
    &:hover {
    }
}
</style>
